關於 TypeScript Compiler API

相信大家都知道什麼是 TypeScript ，而 TypeScript Compiler API 就是 TypeScript 它們自己在編譯時所使用的 API ，透過使用它可以更便利、直觀地透過程式來掃描、解析我們用 TypeScript 所撰寫的程式碼。

使用的方式非常簡單，只要專案內有用到 TypeScript 的話，可以像這樣直接引入並使用：

import * as ts from 'typescript';

注意： TypeScript 的版本要在 1.6 版以上方可使用，目前最新的版本是 3.6.3 。

起手式

先來個起手式暖暖身：

ts.createSourceFile(
  'test.ts',
  `const name = 'Leo';`,
  ts.ScriptTarget.ES2015,
  true,
  ts.ScriptKind.TS
);

createSourceFile 這個函式的功能是用來建立檔案，是在使用 TypeScript Compiler API 時，百分之百一定會使用到的函式。

它有五個參數：

1. fileName: string - 檔案名稱。
2. sourceText: string - 檔案內容。
3. languageVersion: ScriptTarget - 語言版本。
4. setParentNodes?: boolean - 是否要為每個節點設置 parentNode （父節點）這個屬性，預設為 false。
5. scriptKind?: ScriptKind - 檔案類型，如為 .ts 檔可不給。

AST

AST（ Abstract Syntax Tree ，抽象語法樹） 是一個大型的樹狀結構 ，它的結構其實跟 DOM 很像，如下圖所示：

之所以說它們很像，是因為它們都是由一個個的節點 （ Node ） 所組成，差別只在於各自節點的資料內容與資料結構不同罷了。

以下是 AST 節點幾個比較重要的屬性：

• kind: SyntaxKind - 該節點的類型， 所有類型都定義在 SyntaxKind` 這個列舉裡（總共 378 種）。
• parent: Node - 該節點的父節點的資料（如果在使用 ts.createSourceFile 時沒有傳入第四個參數或是該參數給 false 時，此欄位不會有資料）。
• flags: NodeFlags - 該節點的註記類型，所有類型都定義在 NodeFlags 這個列舉裡（總共 27 種）。
• pos: number - 該節點所屬程式碼的開始位置。
• end: number - 該節點所屬程式碼的結束位置。

拿起手式的例子來說，結構大致會長得像是下圖這樣：

• SourceFile 是整個 AST 的根節點，無論檔案內有沒有內容，一定會有它。
• VariableStatement 表示在這個檔案中，有一個宣告變數的節點，這個節點基本上就代表著 const name = 'Leo'; 這一行。
• VariableDeclarationList 這個節點代表 const name = 'Leo' 。
• VariableDeclaration 這個節點代表 name = 'Leo' 。
• name 是 Identifier 、 'Leo' 是 StringLiteral 。
• 最後則是 EndOfFileToken ，是整個 AST 中最末梢的節點，無論檔案內有沒有內容，一定會有它。

如果文字敘述有點讓你暈頭轉向的話，筆者換個比較清楚一點的方式表達：

本日結語

轉眼就來到了第十天，寫鐵人賽就是這麼的樸實無華且枯燥。

今天主要是先跟大家說明 TypeScript AST 與 Compiler API 的基礎原理，雖然沒有程式碼較令人感到枯燥乏味，但一切都是為了明天的應用所鋪路。

明天將會分享如何使用 TypeScript Compiler API 來修改現有檔案內的程式碼，敬請期待！

參考資料

• Creating Typescript with the Typescript compiler
• Processing TypeScript using TypeScript
• Using the Compiler API
• [TypeScript] Compiler API 第一次接觸
• 深入理解 TypeScript - 抽象语法树